<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒模型卡片案例</title>
		<style>
			*{
				background-color: #f5f5f5;
			}
			/*  第一个 */
			div#product_card{
				width: 300px;
				height: 60px;
				background-color: white;
				border-radius: 5px;
				margin: 100px;
				box-shadow: 1px 1px 5px 1px #cccccc inset;
			}
			#search{
				background-color: transparent;
				margin: 20px;
				text-align: left;
				padding: 20px 5px 5px 3px;
				color: #adadaa;
			}
			#product{
				background-color: transparent;
				margin: 3px;
			}
			#button{
				border-radius: 5px;
				background: 10px red;
				color: #ffffff;
				padding: 10px 10px;
				margin: 34px;
			}
			
			/* 第二个 */
			div#product_activity{
				width: 250px;
				height: 60px;
				background-color: #ffffff;
				border-radius: 8px;
				margin: 100px;
				box-shadow:1px 1px 5px 1px #c3c3c0 inset;
			}
			input{
				border: transparent;
				background-color: white;
				margin: 13px 3px;
				padding: 10px 0px 5px 8px;
			}
			button{
				border: transparent;
				background-color: red;
				padding: 10px 10px;
				border-radius: 5px;
				color: #ffffff;
			}
		</style>
	</head>
	<body>
		<div id="product_card">
			<p id="search" class="p-with-spaces">搜索&nbsp;
			<span id="product">京东商品&nbsp;</span>
			<span id="button">&nbsp;搜索&nbsp;</span>
			</p>
		</div>
		<div id="product_activity">
			<input type="text" placeholder="搜索 京东商品">
			<button>搜索</button>
		</div>
	</body>
</html>